<template>
  <view class="customer-info">
    <div class="customer-btn">
      <div>
        <button type="primary" size="mini" class="mini-btn" @click="addCustomer">
          新增
        </button>
      </div>
      <div class="btn-search">
        <div class="btn-mini btnOne" @click="clickSearch">
          <uni-icons type="search" size="20" color="#606266" />
        </div>
        <div class="btn-mini" @click="clickRefresh">
          <uni-icons type="loop" size="18" color="#606266" />
        </div>
      </div>
    </div>
    <div v-if="showSearch" class="search">
      <div class="topSearch">
        <div>关键字</div>
        <div>
          <uni-easyinput v-model="searchForm.company" class="uni-mt-5" trim="all" placeholder="请输入内容" />
        </div>
      </div>
      <div class="botSearch">
        <div>状态</div>
        <div>
          <uni-data-select v-model="searchForm.status" :localdata="statusList" />
        </div>
      </div>
      <div class="search-btn">
        <button class="search-one" size="mini" @click="clickMoreSearch">
          查询
        </button>
        <button class="search-two" size="mini" @click="clickReset">
          重置
        </button>
      </div>
    </div>
    <div class="customer-content">
      <template v-if="list.length > 0">
        <ze-scroll :exclude-tabbar="true" @scrolltolower="handleScrolltolower">
          <customer-item v-for="item in list" :key="item.id" :show-search="showSearch" :info="item" :costomer-status="statusList" @cleanSearch="cleanSearch" @getList="getList" />
          <uni-load-more :status="moreStatus" />
        </ze-scroll>
      </template>
      <van-empty v-else description="暂无数据" />
    </div>
    <customer-form ref="customer" :status-list="statusList" @getList="getList" />
  </view>
</template>

<script>
import CustomerItem from './customer-item.vue'
import CustomerForm from './customer-form.vue'
import { getCustomerInfo } from '@/apis/customer'
import ZeScroll from '@/components/ze-scroll/index.vue'
import { getDict } from '@/apis/dict.js'
export default {
  components: { CustomerItem, ZeScroll, CustomerForm },
  data() {
    return {
      showSearch: false,
      index: 1,
      pageNo: 1,
      pageSize: 10,
      list: [],
      scrollTop: '',
      moreStatus: 'more',
      statusList: [],
      searchForm: {
        company: '',
        status: '',
      },
    }
  },
  created() {
    this.getList()
    this.getStatus()
  },
  methods: {
    addCustomer() {
      this.$refs.customer.open()
    },
    // 查询
    clickMoreSearch() {
      this.pageNo = 1
      this.getList()
    },
    // 重置
    clickReset() {
      this.searchForm = {}
      this.pageNo = 1
      this.getList()
    },
    // 状态查询
    async getStatus() {
      this.statusList = []
      const res = await getDict('custom_status')
      res.forEach((item, index) => {
        const obj = {}
        obj.value = item.value
        obj.text = item.label
        this.statusList.push(obj)
      })
    },
    cleanSearch() {
      this.showSearch = false
      this.index = this.index + 1
    },
    clickSearch() {
      if (this.index % 2 == 1) {
        this.showSearch = true
      } else {
        this.showSearch = false
      }
      this.index++
    },
    clickRefresh() {
      this.pageNo = 1
      this.getList()
    },
    async getList() {
      uni.showLoading({
        title: '查询中',
      })
      if (this.pageNo > 1) {
        this.moreStatus = 'loading'
      }
      const params = { pageNo: this.pageNo, pageSize: this.pageSize, ...this.searchForm }
      const res = await getCustomerInfo(params)
      const { total, records } = res
      if (this.pageNo === 1) {
        this.list = records
      } else {
        this.list = [...this.list, ...records]
      }
      this.moreStatus = this.list.length >= total ? 'noMore' : 'more'
      uni.hideLoading()
    },
    refresh() {
      this.pageNo = 1
      this.getList()
    },
    loadMore() {
      if (['noMore', 'loading'].includes(this.moreStatus)) {
        return
      }
      this.pageNo += 1
      this.getList()
    },
    handleScrolltolower() {
      this.loadMore()
    },
  },
}
</script>

<style lang="scss" scoped>
	.customer-info{
		.customer-btn{
			padding: 10px 0px;
			width: 94%;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			.btn-search{
				display: flex;
				.btnOne{
					margin-right:5px;
				}
				.btn-mini{
					padding: 0px 5px;
					border-radius: 50%;
					background: #fff;
					border: 1px solid #dcdfe6;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
			.mini-btn{
				background: #739eca;
			}
		}
		.search{
			padding: 20rpx 0px;
			width: 94%;
			margin: 0 auto;
			.topSearch,.botSearch{
				display: flex;
				div:nth-child(1){
					width:20%;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					padding-right:15px;
				}
				div:nth-child(2){
					width:80%;
				}
			}
			.botSearch{
				margin-top:10px;
			}
			.search-btn{
				padding-right: 20px;
				display: flex;
				justify-content: flex-end;
				.search-one{
					margin: 10px 10px;
					background: #739eca;
					color: #fff;
					font-size: 14px;
				}
				.search-two{
					margin: 20rpx 0rpx 20rpx 20rpx;
					background: #fff;
					font-size: 14px;
				}
			}
		}
	}

</style>
